<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一次学前端 - 入门练习站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Hello, 我的第一个网页！</h1>
        <p>欢迎来到前端开发的世界 🚀</p>
    </header>

    <main>
        <section class="demo-section">
            <h2>交互示例：点击按钮改变文字颜色</h2>
            <p id="demo-text">这是可以变色的文字，点击下面的按钮试试！</p>
            <button id="color-btn" class="demo-btn">点击我变色</button>
            <button id="reset-btn" class="demo-btn reset">恢复默认</button>
        </section>

        <section class="demo-section">
            <h2>HTML基础示例</h2>
            <div class="code-example">
                <h3>标题标签</h3>
                <h1>h1 是最大的标题</h1>
                <h2>h2 是二级标题</